<template>
  <div class="app-container">
    <el-form ref="dataForm" :model="temp" label-position="left" label-width="100px" inline style="width: 1200px; margin-left:50px;">
      <el-row>
        <el-col :span="24">
          <el-steps :space="200" :active="temp.purchStatus / 10">
            <el-step title="提交" icon="el-icon-edit" />
            <el-step title="审核" icon="el-icon-s-check" />
            <el-step title="排期" icon="el-icon-aim" />
            <el-step title="加购" icon="el-icon-shopping-cart-full" />
            <el-step title="跟单" icon="el-icon-s-order" />
            <el-step title="完成" icon="el-icon-finished" />
          </el-steps>
        </el-col>
      </el-row>
      <div>
        <el-divider><i class="el-icon-mobile-phone" />资料数据</el-divider>
        <el-row>
          <el-col :span="8">
            <el-form-item label="编号">
              <span>{{ temp.id }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="渠道">
              <span>{{ temp.userName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="商品金额">
              <span>{{ temp.skuPrice }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="账号">
              <span>{{ temp.account }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="密码">
              <span>{{ temp.password }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="电话">
              <span>{{ temp.phone }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="姓名" prop="receiveName">
              <span>{{ temp.receiveName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="地址" prop="receiveAddress">
              <span>{{ temp.receiveAddress }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="备注" prop="remark">
              <span>{{ temp.remark }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="报单时间" prop="createTime">
              <span>{{ temp.createTime }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="商品截图" prop="orderImg">
              <el-image style="width: 100px; height: 100px" :src="temp.skuImg" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <el-divider><i class="el-icon-mobile-phone" />补全信息</el-divider>
      <el-row>
        <el-col :span="8">
          <el-form-item label="审核" prop="approvalStatus">
            <el-radio-group v-model="temp.approvalStatus">
              <el-radio-button label="1">通过</el-radio-button>
              <el-radio-button label="-1">不通过</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="原因">
            <el-select v-model="temp.approvelResult" :disabled="temp.approvalStatus == 1" clearable placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.label" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="备注">
            <el-input v-model="otherResult" placeholder="请输入备注" />
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-button plain type="primary" icon="el-icon-s-check" @click="completion">审核资料</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="22">
          <el-form-item
            v-for="(sku, index) in temp.skus"
            :key="sku.key"
            :label="'Sku' + index"
            :rules="{ required: true, message: 'Sku不能为空', trigger: 'blur'}"
          >
            <el-input v-model="sku.skuId" style="width:150px;" />
            <el-input v-model="sku.count" style="width:50px;" />
            <el-button icon="el-icon-minus" @click.prevent="removeDomain(sku)" />
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-button plain type="primary" icon="el-icon-plus" @click="addDomain">新增Sku</el-button>
        </el-col>
      </el-row>
      <el-divider><i class="el-icon-mobile-phone" />自动信息</el-divider>
      <el-row>
        <el-col :span="2">
          <el-form-item label="排期：" />
        </el-col>
        <el-col :span="6">
          <el-form-item label="排期编号">
            <span>{{ temp.purchSchedule.id }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="排期日期">
            <span>{{ temp.purchSchedule.scheduleDate }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="排期订单">
            <span>{{ temp.purchSchedule.sourceOrder }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-button plain type="primary" icon="el-icon-aim" :disabled="temp.purchStatus>=30" @click="addSchedule">自动排期</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="2">
          <el-form-item label="" />
        </el-col>
        <el-col :span="22">
          <el-form-item label="手动排期">
            <el-select v-model="temp.purchScheduleId" clearable placeholder="请选择">
              <el-option v-for="item in scheduleList" :key="item.id" :label="item.sourceOrder" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="参考价格">
            <span>￥{{ temp.cartPrice }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="" />
        </el-col>
        <el-col :span="6">
          <el-form-item label="" />
        </el-col>
        <el-col :span="2">
          <el-button plain type="primary" icon="el-icon-shopping-cart-full" @click="addCart">加购物车</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="是否跟单">
            <el-radio-group v-model="temp.confirmStatus">
              <el-radio-button label="2">是</el-radio-button>
              <el-radio-button label="-2">否</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="订单号">
            <el-input v-model="temp.orderId" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="" />
        </el-col>
        <el-col :span="2">
          <el-button plain type="primary" icon="el-icon-s-order" @click="confirmOrder">确认跟单</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="2">
          <el-form-item label="订单：" />
        </el-col>
        <el-col :span="4">
          <el-image style="width: 100px; height: 100px" :src="orderDetail.realProducts[0].defaultImagePath + '150x150.jpg'" />
        </el-col>
        <el-col :span="2">
          <el-form-item label="数量">
            <span>X {{ orderDetail.realProducts[0].quantity }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商品信息">
            <span>{{ orderDetail.realProducts[0].brandNameCN }}</span>
          </el-form-item>
          <el-form-item label="商品信息">
            <span>{{ orderDetail.realProducts[0].productNameCN }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="规格">
            <span>{{ orderDetail.realProducts[0].custom }}</span>
          </el-form-item>
          <el-form-item label="单价">
            <span>{{ orderDetail.realProducts[0].offerPrice }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-button plain type="primary" icon="el-icon-search" @click="getOrderDetail">获取订单</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="2">
          <el-form-item label="物流：" />
        </el-col>
        <el-col :span="20">
          <el-collapse accordion>
            <el-collapse-item
              :title="deliveryInfo.companyNameCN +' - '+ deliveryInfo.deliveryNumber +' - '+
                deliveryInfo.orderStatus + '   查看更多物流信息'"
            >
              <el-timeline>
                <el-timeline-item
                  v-for="(activity, index) in deliveryInfo.deliveryTrackings"
                  :key="index"
                  :timestamp="activity.updateTime"
                >
                  {{ activity.trackingInfo }}
                </el-timeline-item>
              </el-timeline>
            </el-collapse-item>
          </el-collapse>
        </el-col>
        <el-col :span="2">
          <el-button plain type="primary" icon="el-icon-truck" @click="getDelivery">获取物流</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { Notification, MessageBox, Message } from 'element-ui'
import { tableInfo, crudUtil } from '@/utils/future/toolkit'
import { fetchOrder, completion, addSchedule, addCart, getShopcartStepTwo, getDelivery, getOrderDetail } from '@/api/purch/purchOrder'
import { fetchDateList } from '@/api/purch/purchSchedule'
export default {
  name: 'PurchOrderForm',
  data() {
    const tableData = {
      temp: { purchSchedule: {}, skus: [] },
      purchSchedule: { id: '', scheduleDate: '', sourceOrder: '' },
      skus: [{ skuId: '', count: 1 }],
      shopcartStepTwo: { cneeInfo: {}},
      deliveryInfo: { deliveryTrackings: [] },
      orderDetail: { realProducts: [{ defaultImagePath: '' }] },
      options: [{ value: '0', label: '信息不完善信息不完善' }, { value: '1', label: '未跟单' }, { value: '2', label: '其他' }],
      scheduleList: [],
      otherResult: ''

    }
    return Object.assign(tableData, tableInfo)
  },
  created() {
    this.temp.id = this.$route.query.orderId
    if (this.temp.id != '' && this.temp.id != undefined) {
      this.updateActivity(this.temp.id)
      fetchDateList({}).then(res => {
        this.scheduleList = res
      })
    }
  },
  methods: {

    updateActivity(id) {
      fetchOrder(id).then(res => {
        this.temp = res
        if (!res.purchSchedule) {
          this.temp.purchSchedule = this.purchSchedule
        }
        if (!res.skus || res.skus.length == 0) {
          this.temp.skus = this.skus
        }
        if (this.temp.purchStatus > 50) {
          this.getOrderDetail()
          this.getDelivery()
        }
      })
    },

    removeDomain(item) {
      var index = this.temp.skus.indexOf(item)
      if (index !== -1) {
        this.temp.skus.splice(index, 1)
      }
    },
    addDomain() {
      this.temp.skus.push({ skuId: '', count: 1, key: Date.now() })
    },
    // 补全质料
    completion() {
      const mydata = this.temp
      const data = { skus: mydata.skus, approvalStatus: mydata.approvalStatus, approvelResult: mydata.approvelResult }
      completion(this.temp.id, data).then(res => {
        Message({ message: '恭喜你，更新质料成功', type: 'success' })
      })
    },

    // 获取排期
    addSchedule() {
      addSchedule(this.temp.id).then(res => {
        Message({ message: '恭喜你，获取排期成功', type: 'success' })
      })
    },
    // 加购物车
    addCart() {
      addCart(this.temp.id).then(res => {
        this.temp.cartPrice = res
          .Message({ message: '恭喜你，加购物车成功', type: 'success' })
      })
    },
    // 确认跟单
    confirmOrder() {
      const data = { orderId: this.temp.orderId, confirmStatus: this.temp.confirmStatus }
      completion(this.temp.id, data).then(res => {
        Message({ message: '恭喜你，确认跟单成功', type: 'success' })
      })
    },
    // 加购车
    getShopcartStepTwo() {
      getShopcartStepTwo(this.temp.id).then(res => {
        this.shopcartStepTwo = res.totalAmount
        Message({ message: '恭喜你，预提交订单', type: 'success' })
      })
    },
    // 获取订单
    getOrderDetail() {
      getOrderDetail(this.temp.id).then(res => {
        this.orderDetail = res
        Message({ message: '恭喜你，预提交订单', type: 'success' })
      })
    },
    // 获取物流
    getDelivery() {
      getDelivery(this.temp.id).then(res => {
        this.deliveryInfo = res[0]
      })
    }
  }
}
</script>

<style>

</style>
